<template>
    <el-container :direction="vertical">
        <el-header style="text-align: center;margin: 0 auto;">
            <p style="font-size: 30px;font-weight: bolder;">用户注册</p>
        </el-header>
        <el-container :direction="horizontal">
            <el-aside width="33%">
                <!-- Aside content -->
            </el-aside>
            <el-container :direction="vertical">
                <el-main >
                    <el-card shadow="always" style="width: 500px;">
                        <el-form label-position="top" style="height: 700px;">
                            <el-form-item label="用户名" size="normal" style="height: 80px;">
                                <el-input placeholder="请输入用户名" v-model="userInfo.username" maxlength="5"></el-input>
                            </el-form-item>
                            <el-form-item label="密码" size="normal" style="height: 80px;">
                                <el-input placeholder="请输入密码" v-model="userInfo.password"></el-input>
                            </el-form-item>
                            <el-form-item label="电话号码" size="normal" style="height: 80px;">
                                <el-input placeholder="请输入电话号码" v-model="userInfo.phoneNumber"></el-input>
                            </el-form-item>
                            <el-form-item label="邮箱" size="normal" style="height: 80px;">
                                <el-input placeholder="请输入邮箱" v-model="userInfo.email"></el-input>
                            </el-form-item>
                            <el-form-item label="注册身份" size="normal" style="height: 80px;">
                                <el-radio v-model="userInfo.level" label="用户" value="10" />
                                <el-radio v-model="userInfo.level" label="卖家" value="20"/>
                                                              
                            </el-form-item>
                            <el-form-item label="头像" size="normal" style="height: 80px;">
                                <el-upload
                                v-model:file-list="fileList"
                                v-model:action="actionUrl"
                                name="file"
                                limit="1"
                                list-type="picture-card"
                                :on-preview="handlePictureCardPreview"
                                :on-remove="handleRemove"
                                >
                                <el-icon>
                                    <Plus/>
                                </el-icon>
                                </el-upload>
                                <el-dialog v-model="dialogVisible">
                                    <img w-full :src="dialogImageUrl"/>
                                </el-dialog>
                            </el-form-item>
   
                        </el-form>
                            <el-button type="primary" @click="register" style="position: relative;left: 200px;">注册</el-button>
                    </el-card>                    
                </el-main>
                <el-aside >
                <!-- Aside content -->
            </el-aside>
            </el-container>
        </el-container>
    </el-container>
    
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import qs from 'qs';
import { ElMessage } from 'element-plus';
import router from '@/router';
//定义一个变量来保存注册的信息
const userInfo = ref({
    username: '',
    password: '',
    phoneNumber: '',
    email: '',
    level: '10',
    avatarUrl: ''
});

//注册功能实现
const register = () => {
    //取出fileList中的图片地址
    userInfo.value.avatarUrl = fileList.value[0].response.data;
    console.log(userInfo.value);
    let data = qs.stringify(userInfo.value);
    axios.post(BASE_URL+'/v1/user/register', data).then(response => {
        if(response.data.code === 2000){
            ElMessage.success('注册成功')
            router.push('/login')
        }else{
            ElMessage.error(response.data.msg)
        }
    })
}

/**图片上传相关代码开始**/
const fileList = ref([]);
const dialogImageUrl = ref('');
const dialogVisible = ref(false);
//定义变量用来保存图片上传给哪个后端接口地址
const actionUrl = ref(BASE_URL+'/v1/file/upload');


/**图片上传相关代码结束**/


</script>

<style>

</style>